<!DOCTYPE html>
<html lang="en" style="background: #FFFFFF;height: 100%">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta
    name="description"
    content="KLineChart example"/>
  <title>KLineChart + js</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/klinecharts@7.3.2/dist/klinecharts.min.js"></script>
  <script type="text/javascript" src="./kline.js"></script>
</head>
<body style="margin: 0;height: 100%">
<div id="chart" style="height: 100%"></div>
<script>
    window.onload = function () {
        // 初始化图表
        var chart = klinecharts.init('chart')
        // 创建一个主图技术指标
        chart.createTechnicalIndicator('MA', false, { id: 'candle_pane' })
        // 创建一个副图技术指标VOL
        chart.createTechnicalIndicator('VOL')
        // 创建一个副图技术指标MACD
        chart.createTechnicalIndicator('MACD')
        // 加载数据
        var chartDataList = kLineDataList.map(function (data) {
            return {
                timestamp: new Date(data[0]).getTime(),
                open: +data[1],
                high: +data[2],
                low: +data[3],
                close: +data[4],
                volume: Math.ceil(+data[5]),
            }
        })
        chart.applyNewData(chartDataList)
    }
</script>
</body>
</html>
